<!-- 对 button 组件的编辑 -->
<template>
  <div class="slide-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="8">
                <PaddingTop :defValue="data.config.paddingTop" :chgValue="(d)=>{data.config.paddingTop = d}" />
              </el-col>
              <el-col :span="8">
                <PaddingBottom :defValue="data.config.paddingBottom" :chgValue="(d)=>{data.config.paddingBottom = d}" />
              </el-col>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="幻灯片导航" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.navstyle" placeholder="请选择">
                      <el-option label="无" :value="0"></el-option>
                      <el-option label="数字" :value="1"></el-option>
                      <el-option label="缩略图" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="动画效果" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.antstyle" placeholder="请选择">
                      <el-option label="渐变" :value="'fade'"></el-option>
                      <el-option label="平移" :value="'slide'"></el-option>
                      <el-option label="切片" :value="'slice'"></el-option>
                      <el-option label="百叶窗" :value="'fold'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="切换间隔" style="margin-bottom:0px;">
                    <el-select style="width:80px;" size="mini" v-model="data.config.speend" placeholder="请选择">
                      <el-option label="2" :value="2"></el-option>
                      <el-option label="3" :value="3"></el-option>
                      <el-option label="4" :value="4"></el-option>
                      <el-option label="5" :value="5"></el-option>
                      <el-option label="6" :value="6"></el-option>
                      <el-option label="7" :value="7"></el-option>
                      <el-option label="8" :value="8"></el-option>
                      <el-option label="9" :value="9"></el-option>
                      <el-option label="10" :value="10"></el-option>
                      <el-option label="11" :value="11"></el-option>
                      <el-option label="12" :value="12"></el-option>
                      <el-option label="13" :value="13"></el-option>
                      <el-option label="14" :value="14"></el-option>
                      <el-option label="15" :value="15"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col v-if="!isNaN(parseInt(data.config.navstyle)) && parseInt(data.config.navstyle) !== 0" :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="导航位置" style="margin-bottom:0px;">
                    <el-select style="width:80px;" size="mini" v-model="data.config.navlocation" placeholder="请选择">
                      <el-option label="底部" :value="0"></el-option>
                      <el-option label="头部" :value="1"></el-option>
                      <el-option label="左边" :value="2"></el-option>
                      <el-option label="右边" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="自动播放" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.config.autoplay">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="左右控制按钮" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.config.showcotrols">
                      <el-radio :label="1">显示</el-radio>
                      <el-radio :label="0">不显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="图片说明位置" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.config.captionpos">
                      <el-radio :label="1">上</el-radio>
                      <el-radio :label="0">下</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="显示比例" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.ratio" placeholder="请选择">
                      <el-option label="自动" :value="'auto'"></el-option>
                      <el-option label="16:9" :value="'16:9'"></el-option>
                      <el-option label="3:2" :value="'3:2'"></el-option>
                      <el-option label="4:3" :value="'4:3'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="懒加载" style="margin-bottom:0px;">
                    <el-select size="mini" style="width:120px;" v-model="data.config.islazyload" placeholder="请选择">
                      <el-option label="关闭" :value="0"></el-option>
                      <el-option label="开启" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="图片列表" name="2">
            <div class="imgList-u">
              <draggable v-model="data.imageList" class="imaged-placeholder" v-bind="{draggable:'.img-item-draggable'}" @end="datadragEnd">
                <div class="img-item img-item-draggable" v-for="(item, index) in data.imageList" :key="index">
                  <div class="image">
                    <el-image :fit="'scale-down'" :src="item.src"></el-image>
                  </div>
                  <span class="demonstration"><i @click.stop="editorLink(index)" class="el-icon-link"></i><i
                      @click.stop="editorAttr(index)" class="el-icon-edit"></i><i @click.stop="deleteImage(index)"
                      class="el-icon-delete"></i></span>
                </div>
                <div class="img-item" @click.stop="addImage" slot="header">
                  <div class="image"  style="cursor:pointer;">
                    <el-image :src="ImagesPopAdd"></el-image>
                  </div>
                </div>
              </draggable>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

    <ChooseRepertory ref="chooseImage" />
    <WDialogLink ref="wDialogLink" />
    <WDialogImageAttr ref="wDialogImageAttr" />
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import WDialogLink from '@/components/common/design/dialog/widgets/WDialogLink.vue'
import WDialogImageAttr from '@/components/common/design/dialog/widgets/WDialogImageAttr.vue'

import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
// import ImagesEmpty from '@/assets/images/image-empty.png'
import ImagesPopAdd from '@/assets/images/pop_add.png'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
// import Global from '@/config/global.js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    imageListLength () {
      return '图片数量：' + this.data.imageList.length
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTSLIDE, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      this.repertoryData = bjComponent._other.imageList

      this.data.theme = '' + this.data.theme

      // coding ...
      if (this.data && this.data.config && this.data.config.textAlign === '') {
        this.data.config.textAlign = 'left'
      }

      // 设置列数范围
      let column = this.data.config.column ? parseInt(this.data.config.column) : 2
      if (column < 2 || column > 12 || isNaN(column)) {
        column = 2
      }
      this.data.config.column = column

      this.activeName = '1'
      this.init = true

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '120px',
      name: '幻灯片',
      bjComponent: null,
      data: null,
      themes: themes,
      repertoryData: [],
      activeName: '1',
      // 是否第一次进来
      init: true,

      // import 引入
      ImagesPopAdd: ImagesPopAdd,
      // 图片列表的总数
      total: 32
    }
  },
  methods: {
    deleteImage (index) {
      let item = this.data.imageList[index]
      if (!item) {
        return
      }
      let repertory = this.repertoryData[index]
      if (!repertory) {
        return
      }

      this.data.imageList.splice(index, 1)
      this.repertoryData.splice(index, 1)
    },
    // 拖拉排序
    datadragEnd (event) {
      let item = this.repertoryData[event.oldIndex - 1]
      this.repertoryData.splice(event.oldIndex - 1, 1)
      this.repertoryData.splice(event.newIndex - 1, 0, item)
    },
    // 编辑图片属性
    editorAttr (index) {
      let item = this.data.imageList[index]
      if (!item) {
        return
      }
      let repertory = this.repertoryData[index]
      if (!repertory) {
        return
      }

      this.$refs['wDialogImageAttr'].open({ alt: item.alt, title: item.title, caption: item.caption }, (image) => {
        this.data.imageList[index].alt = image.alt
        this.data.imageList[index].title = image.title
        this.data.imageList[index].caption = image.caption
      })
    },
    // 编辑图片的链接
    editorLink (index) {
      let item = this.data.imageList[index]
      if (!item) {
        return
      }
      let repertory = this.repertoryData[index]
      if (!repertory) {
        return
      }

      this.$refs['wDialogLink'].open(item.imglink, (link) => {
        this.data.imageList[index].imglink = link
      })
    },
    // 添加图片
    addImage () {
      if (this.data.imageList.length >= this.total) {
        this.$message.error('图片列表总数不能超过' + this.total + '张！')
        return
      }
      this.$refs['chooseImage'].show({ title: '选择图片', max: this.total - this.data.imageList.length, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          // let maxOrderNum = 0
          // if (this.repertoryData && this.repertoryData.length > 0) {
          //   this.repertoryData.forEach(element => {
          //     if (element.orderNum > maxOrderNum) {
          //       maxOrderNum = element.orderNum
          //     }
          //   })
          // }

          repertoryList.forEach(item => {
            let src = functions.getRepertoryImageSrcByHostRepertory(item)

            // let repertoryData = {
            //   id: -1,
            //   parentId: 0,
            //   type: 11,
            //   orderNum: ++maxOrderNum,
            //   config: {
            //     title: '',
            //     alt: '',
            //     caption: '',
            //     imglink: {
            //       href: '',
            //       target: ''
            //     }
            //   },
            //   repertory: item,
            //   child: null
            // }

            this.data.imageList.push({
              src: src,
              title: '',
              alt: '',
              caption: '',
              imglink: {
                href: '',
                target: ''
              }
            })
            let imghrepertory = {}
            imghrepertory.hrepertory = item
            this.repertoryData.push(imghrepertory)
          })
        }
      })
    },
    // ......
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
      this.repertoryData = []
      this.activeName = '1'
      this.init = true
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      this.bjComponent._other.imageList = _.cloneDeep(this.repertoryData)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom,
    ChooseRepertory,
    WDialogLink,
    WDialogImageAttr,
    draggable
  }
}

const themes = [
  { theme: '1', content: '无效果' },
  { theme: '2', content: '移入右移 （无边框设置）' },
  { theme: '3', content: '移入上移 （无边框设置）' },
  { theme: '4', content: '移入旋转 360°' },
  { theme: '5', content: '移入放大' },
  { theme: '6', content: '移入缩小' },
  { theme: '7', content: '移入朦胧消失' },
  { theme: '8', content: '文字消失，图片出现' },
  { theme: '9', content: '底部透明文字' },
  { theme: '10', content: '底部文字挤压上移' },
  { theme: '11', content: '文字中间自然出现' },
  { theme: '12', content: '文字扩大出现+图片缩小' },
  { theme: '13', content: '左上角划入' },
  { theme: '14', content: '右上角划入' },
  { theme: '15', content: '横向转动' },
  { theme: '16', content: '纵向转动' },
  { theme: '17', content: '文字右移入+图片右移出' },
  { theme: '18', content: '文字左移入+图片左移出' },
  { theme: '19', content: '文字右移入+图片小左移' },
  { theme: '20', content: '文字左移入+图片小右移' },
  { theme: '21', content: '链接图标' },
  { theme: '22', content: '查看图标' },
  { theme: '23', content: '边框链接1' },
  { theme: '24', content: '边框链接2' }
]

</script>

<style scoped>
.slide-edit .image-slot {
  color: #656565;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit-container-u {
  width: 840px;
  min-height:410px;
}
.imgList-u {
  height: 354px;
  overflow-y: auto;
}
</style>
